<template>
  <div>
    <div class="top">
      <i @click="url('/show')" class="iconfont icon-zuojiantou"></i>
      <img src="@/assets/img/3.png" alt="" />
    </div>
    <div class="banner">
      <img src="@/assets/img/2.png" alt="" />
    </div>
     
    <div class="swiper-container">
          
      <div class="swiper-wrapper">
              
        <div
          class="swiper-slide"
          v-for="item in getDiscount"
          :key="item.id"
        >
                  <img :src="item.pic" alt="" />         
          <div class="num">疯抢{{ item.quanJine }}万件</div>
                  
          <div class="title">{{ item.dtitle | mysub(7) }}</div>
                  
          <div class="pic">
                      <span class="money">￥{{ item.jiage }}</span>
                      <del>￥{{ item.yuanjia }}</del>         
          </div>
                
        </div>
            
      </div>
        
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
import "@/assets/icons/iconfont.css";
import { getDiscount } from "@/api/discount";
export default {
    data(){
        return{
            getDiscount:[]
        }
    },
  async mounted() {
    let ret = await getDiscount();
    console.log(ret);
    console.log(ret.data.data);
    this.getDiscount = ret.data
  },
  //数据有更新，且更新完毕时执行
  updated() {
    this.$nextTick(() => {
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: 4,
        spaceBetween: 10,
      });
    });
  },
  methods:{
    url( url ){
      this.$router.push(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 60px;
  background-color: #8e00d7;
  img {
    position: absolute;
    top: 20px;
    left: 145px;
  }
  i {
    color: white;
    font-size: 18px;
    line-height: 60px;
    margin-left: 10px;
  }
}
.banner {
  width: 100%;
//   height: 200px;
}
.swiper-slide {
  width: 100px;
  height: 170px;
  padding: 0 5px;
  position: relative;
  margin: 0 10px;
  border-radius: 10px;
  background-color: #f5f5f9;
  img  {
      width: 90px;
      height: 90px;
      margin-top: 10px;
  }
  .num{
      widows: 80px;
      height: 20px;
      background-color:linear-gradient(270deg, #ffbe50, #ff570c) ;
    //   box-shadow:0 0.04rem 0.06rem 0 rgb(255 153 67 / 33%);
      border-radius: 10px;
      text-align: center;
      line-height: 20px;
      font-size: 10px;
      color: #fff;
      position: absolute;
      top: 90px;
      left: 13px;

  }
  .title{
      position: absolute;
      top: 115px;
      color: #333;
  }
  .pic{
      position: absolute;
      top: 140px;
      .money{
          color:#fe3738 ;
          font-size: 16px;
          font-weight: 600;
      }
      del{
          color: #999999 ;
      }
  }


}
</style>